<template lang="html">
  <div class="nearly-container">
    <div class="nearly-item" v-for="(item,index) in nearlyData" :key="index">
      <div class="nearly-title">
        <div class="nearly-icon">
          <img :src="item.icon" alt="">
        </div>
        <div class="nearly-info">
          <div class="nearly-user">
            <p class="nearly-username">{{ item.username }}</p>
            <p class="nearly-city">{{ item.city }}</p>
          </div>
          <div class="nearly-time">
            {{ item.times }}
          </div>
        </div>
      </div>
      <p class="nearly-content">{{ item.content }}</p>
      <div class="nearly-pic">
        <img :src="item.pic" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'Nearly',
  data () {
    return {
      nearlyData:[]
    }
  },
  mounted() {
    this.$axios.get(this.HOST + '/burning/nearly')
    .then(res => {
      this.nearlyData = res.data
    })
    .catch(error => {
      console.log(error)
    })
  }
}
</script>

<style lang="less" scoped>
.nearly-container{
  .nearly-item{
    margin-top: 15px;
    box-sizing: border-box;
    width: 100%;
    font-size:14px;
    padding: 0 10px;
    .nearly-title{
      width: 100%;
      height: 40px;
      margin-bottom: 10px;
      div{
        float: left;
      }
      .nearly-icon{
        margin-right: 15px;
        img{
          width: 40px;
          height: 40px;
        }
      }
      .nearly-info{
        width: (355-55)/50rem;
        .nearly-city{
          font-size: 12px;
          height:20px;
          line-height: 20px;
          color:#666;
        }
        .nearly-time{
          float: right;
          height: 40px;
          line-height: 40px;
        }
      }
    }
    .nearly-pic{
      height: 170px;
      width: 100%;
      margin-bottom: 10px;
      img{
        height: 170px;
        width: 100%;
        float: left;
        margin-bottom:15px;
      }
      img:nth-child(2n){
        margin-right: 0;
        float:right;
      }
    }
    .nearly-content{
      color: #666;
      padding-bottom: 10px;
      margin-bottom: 10px;
    }
    .nearly-footer{
      text-align: center;
      height:19.2px;
      div{
        float: right;
      }
      .nearly-dianzan{
        border-right: 1px solid #eee;
        margin-right: 15px;
        i{
          color: red;
        }
      }
      .nearly-pinglun{
        float: right;
      }
    }
  }
  .nearly-item:last-child{
    margin-bottom:60px;
  }
}
</style>
